<template>
  <div class="login-particalGround">
    <div class="login-container">
      <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
        style="height:100%"
      ></vue-particles>
      <div style="display: flex; justify-content: center; margin-top: 150px">
        <el-card style="width: 400px" class="login-box">
          <div slot="header" class="clearfix">
            <h3 class="login-title" style="justify-content: center">
              托管培训中心信息管理系统登陆
            </h3>
          </div>
          <table class="login-title" style="justify-content: center">
            <tr>
              <td class="login-title" style="justify-content: center">
                学号
              </td>
              <td>
                <el-input v-model="user.sno" placeholder="学号" size="medium"></el-input>
              </td>
            </tr>
            <tr>
              <td class="login-title" style="justify-content: center">
                密码
              </td>
              <td>
                <el-input type="password" v-model="user.spassword" placeholder="密码" @keydown.enter.native="doLogin" size="medium"></el-input>
              </td>
            </tr>
            <tr>
              <td class="login-title" style="justify-content: center">
                身份
              </td>
              <td>
                <el-radio v-model="type" :label="1">管理员</el-radio>
                <el-radio v-model="type" :label="2">学生</el-radio>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
              </td>
            </tr>
          </table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      user:{
        sno:'1',
        sname:'',
        sdate:'',
        spassword:'010101',
        samount:'',
      },
      type: 2,
    }
  },
  methods : {
    // doLogin() {
    //   const _this = this;
    //   if (_this.user.username === 'admin' && _this.user.password === '123') {
    //     console.log("密码正确");
    //     const api = 'http://localhost:8081/StudentLogin'
    //     this.axios.post(api, {...this.user}).then(res=>{
    //       // 保存token
    //
    //       // 跳转学生主页
    //     })
    //     if ("1" === _this.user.type) {//管理员方式
    //       _this.$router.push({path:'/'});
    //     } else {
    //       _this.$router.push({path:'/choose'});
    //     }
    //   } else {
    //     _this.$alert('账号或密码错误', '警告', {
    //         confirmButtonText:'确认',
    //       })
    //   }
    // }
    doLogin(){//一点击登录按钮，这个方法就会执行
      //alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
      localStorage.setItem("type", this.type);
      localStorage.setItem("stuno", 1);
      const  _this = this;
      console.log("type:", this.type)
      if (this.type === 1) {
        console.log("管理员信息", this.user.sno, this.user.sname, this.user.sdate, this.user.spassword, this.user.samount)
        this.$axios.post(`http://localhost:8081/LoginManager`,{...this.user}).then((res) => {
          console.log(res.data);
          console.log("3333")
          if(res.data.msg=="登陆成功"){
            console.log("进入if");
              _this.$router.push({path:'/Add',query:_this.user});
          }else{
            if (res.data.msg=="学号不能为空") {
              alert("学号不能为空")
            } else if (res.data.msg=="密码不能少于6位") {
              alert("密码不能少于6位")
            } else if (res.data.msg=="用户不存在") {
              alert("用户不存在")
            } else if (res.data.msg=="密码错误") {
              alert("密码错误")
            } else {
              //console.log("账号密码错误");
              alert("token发放失败");
            }

          }
        })
      } else {
        console.log("学生信息", this.user.sno, this.user.sname, this.user.sdate, this.user.spassword, this.user.samount)
        this.$axios.post(`http://localhost:8081/LoginStudent`,{...this.user}).then((res) => {
          console.log(res.data);
          console.log("1111")
          if(res.data.msg=="登陆成功"){
            console.log("进入if");
              _this.$router.push({path:'/choose',query:{}});
          } else if (res.data.msg=="学号不能为空") {
            alert("学号不能为空");
          } else if (res.data.msg=="密码不能少于6位") {
            alert("密码不能少于6位");
          } else if (res.data.msg=="用户不存在") {
            alert("用户不存在");
          } else if (res.data.msg=="密码错误") {
            alert("密码错误");
          } else {
            //console.log("账号密码错误");
            alert("token发放失败");
          }

        });
      }




    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
}
.login-particalGround {
  background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
  background-repeat: no-repeat;
  background-size: auto;
  height: auto;
  /*background-image: url("./static/background.jpg");*/
}
.login-box {
  border: 1px solid #42b983;
  width: 350px;
  margin: 50px auto;
  padding: 35px 35px 35px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title {
  text-align: center;
  margin: 0 auto auto auto;
  color: #303133;
}
</style>
